import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Text, ScrollView } from "@tarojs/components-rn";
import { getRuntime, pageSize, subtime } from "../../utils/common";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import page4StyleSheet from "./page4_styles";
var _styleSheet = page4StyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Page3 = class Page3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allProvince: [],
      allCity: [],
      allDistrict: [],
      provinceId: -1,
      cityId: -1,
      districtId: -1,
      pageIndex: 1,
      pageSize,
      items: [],
      totalCount: 0
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '其他工程服务' });
    this.getAllProvince();
    this.getAllCity();
    this.getAllDistract();
    this.getAllProjectInfo();
  }
  handelRouter(url = '/pages/index/index') {
    if (!getRuntime().getToken()) {
      getRuntime().navigateTo('/pages/login/login');
      return;
    }
    getRuntime().navigateTo(url);
  }
  // 获取工程项目信息
  getAllProjectInfo() {
    let { FinancialCenterStore } = this.props.stores;
    let { provinceId, cityId, districtId, pageIndex, allProvince, allCity, allDistrict } = this.state;
    FinancialCenterStore.getAllProjectInfo({
      provinceId: provinceId === -1 ? null : allProvince[provinceId]['value'],
      cityId: provinceId === -1 ? null : allCity[cityId]['value'],
      districtId: provinceId === -1 ? null : allDistrict[districtId]['value'],
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({ totalCount: toJS(res.totalCount), items: toJS(res.items)
          });
        } else {
          const { items } = this.state;
          items.push(...(res.items || []));
          this.setState({ totalCount: res.totalCount, items
          });
        }
      }
    });
  }
  onReachBottom() {
    let { totalCount, pageSize, pageIndex } = this.state;
    const { loading } = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllProjectInfo();
      });
    }
  }
  getAllProvince() {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        //console.log(res)
        this.setState({
          allProvince: res
        });
      }
    });
  }
  getAllCity(index = -1) {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllCityFromLocal({
      index,
      callBack: res => {
        this.setState({
          allCity: res
        });
      }
    });
  }
  getAllDistract(indexProvince = -1, indexCity = -1) {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllDistractFromLocal({
      indexProvince,
      indexCity,
      callBack: res => {
        this.setState({
          allDistrict: res
        });
      }
    });
  }
  /**
   * @param type
   * @param column  [0:省,1:市,2:区]
   * @param value 对应省市区的索引值
   */
  changeOption(type, column, value) {
    let { allProvince, allCity, allDistrict } = this.state;
    if (column === 0) {
      this.getAllCity(value);
      this.getAllDistract(value, 0);
      let cityId = value === -1 ? -1 : 0;
      let districtId = value === -1 ? -1 : 0;
      this.setState({
        [type]: value,
        cityId,
        districtId
      }, () => {
        this.getAllProjectInfo();
      });
    } else if (column === 1) {
      this.getAllDistract(this.state.provinceId, value);
      let districtId = value === -1 ? -1 : 0;
      this.setState({
        [type]: value,
        districtId
      }, () => {
        this.getAllProjectInfo();
      });
    } else {
      this.setState({
        [type]: value
      }, () => {
        this.getAllProjectInfo();
      });
    }
  }
  handelUpgrade(url = '/pages/index/index') {
    if (!getRuntime().getToken()) {
      getRuntime().navigateTo('/pages/login/login');
      return;
    }
    getRuntime().navigateTo(url);
  }
  render() {
    let { allProvince, provinceId, allCity, cityId, allDistrict, districtId, items } = this.state;
    return <View style={_styleSheet["other"]}>
        <View style={[_styleSheet["select-option"], _styleSheet["pb0"]]}>
          <View style={_styleSheet["option-item"]}>
            <View onClick={this.changeOption.bind(this, 'provinceId', 0, -1)} style={_getStyle(provinceId === -1 ? 'option  option-active' : 'option')}>全部</View>
            <ScrollView scrollX scrollWithAnimation style={_styleSheet["scrollview"]}>
              {allProvince.map((item, index) => {
              return <View key={item.id} onClick={this.changeOption.bind(this, 'provinceId', 0, index)} style={_getStyle(provinceId === index ? 'option  option-active' : 'option')}>{item.label}</View>;
            })}
            </ScrollView>
          </View>

          <View style={[_styleSheet["option-item"], allCity.length <= 0 ? { 'display': 'none' } : '']}>
            <View onClick={this.changeOption.bind(this, 'cityId', 1, -1)} style={_getStyle(cityId === -1 ? 'option  option-active' : 'option')}>全部</View>
            <ScrollView scrollX scrollWithAnimation onScroll={this.onScroll} style={_styleSheet["scrollview"]}>
              {allCity.map((item, index) => {
              return <View key={item.id} onClick={this.changeOption.bind(this, 'cityId', 1, index)} style={_getStyle(cityId === index ? 'option  option-active' : 'option')}>{item.label}</View>;
            })}
            </ScrollView>
          </View>

          <View style={[_styleSheet["option-item"], allDistrict.length <= 0 ? { 'display': 'none' } : '']}>
            <View onClick={this.changeOption.bind(this, 'districtId', 2, -1)} style={_getStyle(districtId === -1 ? 'option  option-active' : 'option')}>全部</View>
            <ScrollView scrollX scrollWithAnimation style={_styleSheet["scrollview"]}>
              {allDistrict.map((item, index) => {
              return <View key={item.value} onClick={this.changeOption.bind(this, 'districtId', 2, index)} style={_getStyle(districtId === index ? 'option  option-active' : 'option')}>{item.label}</View>;
            })}
            </ScrollView>
          </View>
        </View>

        <View style={_styleSheet["interval"]} />
        <View style={_styleSheet["list-03"]}>
          {items.length > 0 && items.map((item, index) => {
          return <View key={item.id} onClick={this.handelRouter.bind(this, '/pages/finance/page4_detail?id=' + item.id)} style={_styleSheet["list-03-item"]}>
                  {index < 3 && <View style={_styleSheet["label"]}>热</View>}
                  <View style={_styleSheet["r"]}>
                    <View style={_styleSheet["title"]}>{item.projectName}</View>
                    <View style={_styleSheet["info"]}>
                      <Text style={_styleSheet["date"]}>{subtime(item.creationTime)}</Text>
                      <Text style={_styleSheet["date"]}>{item.area}</Text>
                    </View>
                  </View>
                </View>;
        })}
          {items.length <= 0 && <View style={_styleSheet["page-none-info"]}>暂时没有任何项目信息~</View>}
        </View>

        <View style={_styleSheet["footer-block"]} />
        <View onClick={this.handelUpgrade.bind(this, '/pages/finance/page4_demand')} style={_styleSheet["page-submit"]}>发布工程项目信息</View>
      </View>;
  }
};
Page3 = tslib_1.__decorate([inject("stores"), observer], Page3);
export default Page3;